<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/business/add' }">编辑</el-breadcrumb-item>
        <el-breadcrumb-item>价格清单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer viewBusinessPage">
      <!-- 表格 -->
      <div class="zy-form my-table">
        <template>
          <el-table border :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
            <el-table-column label="方案名称">
              <template>{{'方案名称'}}</template>
            </el-table-column>
            <el-table-column v-for="(item,index) in items" :key="item" :label="item.itemName">
              <template slot-scope="scope">{{scope.row.values[index]}}</template>
            </el-table-column>
            <el-table-column prop="tbValue4" label="成本价">
              <template slot-scope="scope">
                <!-- <el-form :model="scope.row" :rules="rules" ref="scope.row">
                <el-form-item prop="minPrice">-->
                <el-input type="number" v-model="scope.row.minPrice"
                          :min="0" :max="999999"></el-input>
                <!-- </el-form-item>
                </el-form>-->
              </template>
            </el-table-column>
            <el-table-column prop="tbValue4" label="销售底价">
              <template slot-scope="scope">
                <!-- <el-form :model="scope.row" :rules="rules" ref="scope.row">
                <el-form-item prop="minPrice">-->
                <el-input type="number" :min="0" :max="99999999999" v-model="scope.row.costPrice"></el-input>
                  <!-- </el-form-item>
                </el-form>-->
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- 表格结束 -->
    </div>

    <div class="page-form-btn">
      <el-button @click="back">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "viewBusiness",
  data() {
    var checkNum = (rule, value, callback) => {
      if (value) {
        if (Number.isInteger(Number(value)) && Number(value) > 0) {
          callback();
        } else {
          callback(new Error("请输入有效年龄"));
        }
      }
    };
    return {
      rules: {
        minPrice: [
          {
            max: 225,
            message: "不能超过255个字符",
            trigger: "blur"
          },
          { validator: checkNum, trigger: "blur" }
        ],
        costPrice: [
          {
            max: 225,
            message: "不能超过255个字符",
            trigger: "blur"
          },
          { validator: checkNum, trigger: "blur" }
        ]
      },
      index: 0,
      productId: this.$route.query.id,
      // 表格
      items: [],
      tableData: []
    };
  },
  created() {
    this.getItems();
  },
  methods: {
    initTableData: function() {
      this.getNum(this.items.length - 1, 0, "");
    },
    getItems() {
      Http.api.get("/insure/" + this.productId + "/items").then(res => {
        this.items = res.data;
        this.items.forEach(item => {
          this.$set(item, "value", item.itemValues.split(","));
          console.log(this.items);
          this.initTableData();
          let itemPrice = this.getprice();
        });
      });
    },
    getprice() {
      Http.api.get("/insure/" + this.productId + "/price").then(res => {
        let items = res.data;
        items.forEach(item => {
          this.$set(item, "values", item.itemNames.split(","));
        });
        console.log(items);
        //填充价格
        for (var i in this.tableData) {
          items.forEach(item => {
            if (this.tableData[i].itemNames == item.itemNames) {
              this.tableData[i].costPrice = item.costPrice;
              this.tableData[i].minPrice = item.minPrice;
            }
          });
        }
      });
    },
    getNum(totalLength, currentLength, v) {
      let bf = this.items[currentLength].value;
      for (var j in bf) {
        var name = "";
        if (v) {
          name = v + "," + bf[j];
        } else {
          name = bf[j];
        }
        if (currentLength === totalLength) {
          this.index++;
          this.tableData.push({
            values: name.split(","),
            itemNames: name,
            orderIndex: this.index,
            costPrice: 0,
            minPrice: 0
          });
        } else {
          this.getNum(totalLength, currentLength + 1, name);
        }
      }
    },

    //计算合并的行数
    calMergeRows(itemIndex) {
      let i = 1;
      if (itemIndex === this.items.length - 1) {
        return;
      }

      for (var j in this.items) {
        if (j > itemIndex) {
          i = i * this.items[j].value.length;
        }
      }
      return i;
    },
    // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //合并方案名称
      if (columnIndex == 0) {
        if (rowIndex == 0) {
          return { rowspan: this.tableData.length, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
      //合并项目
      for (let itemIndex in this.items) {
        let r = this.calMergeRows(itemIndex);
        if (columnIndex === itemIndex * 1 + 1) {
          if (rowIndex % r === 0) {
            return { rowspan: r, colspan: 1 };
          } else {
            return { rowspan: 0, colspan: 0 };
          }
        }
      }
    },
    // 保存
    save() {
      if(!this.check()){
        return ;
      }
      Http.api
        .post("/insure/" + this.productId + "/price", this.tableData)
        .then(res => {
          this.$message({
            message: "数据已保存",
            center: true,
            iconClass: "iconfont iconcheck",
            customClass: "custom-message"
          });
          this.$router.push({path:"/business/list"});
        });
    },
    back() {
      this.$router.push({path:"/business/list"});
    },
    check(){
      var res = true ;
      this.tableData.forEach((item)=>{
        if(item.costPrice>item.minPrice){
          res = false ;
          this.$message.error("销售价格必须大于成本价格")
        }
        if(item.costPrice<0 || item.minPrice<0){
          res =false ;
          this.$message.error("销售价格活成本价必须大于0")
        }
      });
      return res ;
    }
  }
};
</script>
